<template>
  <table border="1" width="700" style="border-collapse: collapse">
    <caption> 购物车 </caption>
    <thead>
      <Add :arr="goodList"></Add>
      <tr>
        <th><input type="checkbox" v-model="isAll"/><span>全选</span></th>
        <th>名称</th>
        <th>价格</th>
        <th>数量</th>
        <th>总价</th>
        <th>操作</th>
      </tr>
    </thead>
    <Tr :arr="goodList" @delInd="onDelInd"></Tr>
    <Total :arr="goodList"></Total>
  </table>
</template>

<script>
import Add from './components/Add.vue'
import Tr from './components/Tr.vue'
import Total from './components/Total.vue'
export default {
  data() {
    return {
      goodList: JSON.parse(localStorage.getItem('goodList'))||[]
    };
  },
  watch:{
    goodList:{
      deep:true,
      handler(){
        localStorage.setItem('goodList',JSON.stringify(this.goodList))
      }
    }
  },
  methods:{
    onDelInd(index){
      this.goodList.splice(index,1)
    }
  },
  computed:{
    isAll:{
      get(){
        return this.goodList.length && this.goodList.every(it=>it.checked)
      },
      set(checked){
        this.goodList.forEach(it=>it.checked=checked)
      }
    }
  },
  components:{
    Add,
    Tr,
    Total
  }
};
</script>

<style>
</style>
